<template>
  <view class="wrapper">
    <view class="item" v-for="(item, index) in list" :key="index" @click="handleView(item)">
      <view class="image">
        <u--image
            lazy-load width="160rpx"
            height="160rpx"
            :fade="true" duration="450"
            :src="baseUrl + item.image.thumbnail_path"
            v-if="item.image"></u--image>
      </view>
      <view class="desc">
        <view class="title one-lines">{{ item.name }}</view>
        <view class="time">{{ item.address }}</view>
      </view>
    </view>
    <view class="nothing" v-if="list.length === 0">暂无相关门店...</view>
  </view>
</template>

<script>
import base64 from '../../util/base64'
import config from '../../config/config'
import Service from '../../api/service'
const serviceModel = new Service()

export default {
  data() {
    return {
      baseUrl: config.baseUrl,
      list: [],
      queryList: {
        page: 0,
        pageSize: 10,
        busy: false
      }
    }
  },
  onReachBottom() {
    this.getList(true)
  },
  onLoad() {
    this.getList()
  },
  methods: {
    getList(append = false) {
      if (this.queryList.busy === false) {
        this.queryList.page++
        this.loading = true
        this.queryList.busy = true
        serviceModel.shopList({
          ...this.queryList
        }).then(response => {
          let { data } = response
          data = base64.parse(data)
          if (data.list.length === 0) {
            this.queryList.busy = true
          } else {
            this.queryList.busy = false
            if (append) {
              this.list = this.list.concat(data.list)
            } else {
              this.list = data.list
            }
          }
          // console.log(this.list)
        })
      }
    },
    handleView(item) {
      uni.navigateTo({
        url: `/sub_service/shop/detail?id=${item.id}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  background: $background_color;
  padding: 20rpx;
  font-size: 24rpx;
  .nothing {
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    border-radius: 10rpx;
    color: #ccc;
  }
  .item {
    background: white;
    padding: 20rpx;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;
    .image {
      width: 180rpx;
    }
    .desc {
      padding-left: 10px;
      .title {
        font-weight: 700;
        //height: 30px;
        line-height: 20px;
        //background: red;
      }
      .time {
        color: #ccc;
      }
    }
  }
}
</style>
